import { defineComponent, ref } from "vue";
import { Edit } from "@element-plus/icons-vue";
import "./styleForThree.scss";
import { Drag } from "vue-easy-dnd";
import ContentBody from "./compontents/ContentBody.jsx";

import "vue-easy-dnd/dist/dnd.css";

export default defineComponent(() => {
  const collapseActiveNames = ref(["规则"]);
  const elNodes = ref([
    { type: "EL", name: "串行编排", el: "THEN", liteflow: "el_then", text: "" },
    { type: "EL", name: "并行编排", el: "WHEN", liteflow: "el_when" },
    {
      type: "EL",
      name: "If条件编排",
      el: "IF",
      liteflow: "el_if",
      text: "IF(x, t, f)",
    },
    {
      type: "EL",
      name: "选择编排",
      el: "SWITCH",
      liteflow: "el_switch",
      text: "SWITCH(x).TO(a, b, c).DEFAULT(y)",
    },
    // {type: 'EL', name:'Else条件编排', el:'ELSE', liteflow: 'el_else'},
    // {type: 'EL', name:'ElseIf条件编排', el:'ELIF', liteflow: 'el_elif'},
    {
      type: "EL",
      name: "For循环编排",
      el: "FOR",
      liteflow: "el_for",
      text: "FOR(5).DO(THEN(a, b));FOR(x).DO(THEN(a, b));",
    },
    {
      type: "EL",
      name: "While循环编排",
      el: "WHILE",
      liteflow: "el_while",
      text: "WHILE(w).DO(THEN(a, b));",
    },
    {
      type: "EL",
      name: "Iterator循环编排",
      el: "ITERATOR",
      liteflow: "el_iterator",
      text: "ITERATOR(x).DO(THEN(a, b))",
    },
    // {type: 'EL', name:'子流程编排', el:'THEN', liteflow: 'el_then'},
    {
      type: "EL",
      name: "异常捕获",
      el: "CATCH",
      liteflow: "el_catch",
      text: " CATCH(THEN(a,b)).DO(c)",
    },
  ]);
  const collapseHandleChange = (val) => {
    console.log(val);
  };

  const comList = ref([])

  const render = () => {
    return (
      <>
        <div className="step-card">
          <el-row gutter="8">
            <el-col span="6">
              <el-scrollbar
                height={window.innerHeight - 180 + "px"}
                style="padding-right: 8px"
              >
                <el-collapse
                  v-model={collapseActiveNames.value}
                  onChange={collapseHandleChange}
                >
                  <el-collapse-item title="编排规则" name="编排规则">
                    {elNodes.value.map((item, index) => {
                      return (
                        <el-col span="24" class="card-box">
                          <Drag
                            data={item}
                            key={item.liteflow}
                            handle=".drag-handle"
                          >
                            <el-card class="box-card">
                              <div class="card-header drag-handle">
                                <span>{item.name}</span>
                                <span style="color: darkred">
                                  {item.el.toUpperCase()}
                                </span>
                              </div>
                            </el-card>
                          </Drag>
                        </el-col>
                      );
                    })}
                  </el-collapse-item>
                </el-collapse>
              </el-scrollbar>
            </el-col>
            <el-col span="24">
              dd
              <ContentBody list={comList.value} />
            </el-col>
          </el-row>
        </div>
      </>
    );
  };
  return render;
});
